<template>
    <div id="deductPoints">
        <div id="top_btn_box">
            <el-card shadow="hover">
                <el-row>
                    <el-col :span="8">
                        <span class="title_span">考评时间：</span>
                        <el-date-picker
                            v-model="chose_date"
                            type="date"
                            format="yyyy年M月d日"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="success" @click="push" v-loading="loading">提交</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="reset_page">重置</el-button>
                    </el-col>
                    <el-col :span="2" :offset="8">
                        <el-button type="primary" @click="drawer = true">操作记录</el-button>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <el-row>
            <el-col :span="9">
                <div id="teacher_box">
                    <el-card shadow="hover">
                        <el-row>
                            <el-col :span="10">
                                <span class="title_span">年级：</span>
                                <el-select v-model="search_params.partID" clearable placeholder="请选择" @change="change_grade" style="width: 60%;">
                                    <el-option
                                        v-for="(item, index) in grade_group"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.deptId">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="14">
                                <span class="title_span">姓名：</span>
                                <el-select v-model="search_params.mobile" filterable clearable placeholder="请选择" @change="change_teacher" style="width: 70%;">
                                    <el-option
                                        v-for="(item, index) in teacher_data"
                                        :key="index"
                                        :label="item.realName"
                                        :value="item.mobile">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <div class="table-name">教师列表</div>
                        <el-table
                                ref="filterTable"
                                :data="tableData"
                                tooltip-effect="dark"
                                stripe
                                style="width: 100%"
                                :max-height="clientHeight-320"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    type="index"
                                    label="序号">
                            </el-table-column>
                            <el-table-column
                                    prop="realName"
                                    label="姓名">
                            </el-table-column>
<!--                            <el-table-column-->
<!--                                    prop="grade"-->
<!--                                    label="年级"-->
<!--                                    column-key="grade"-->
<!--                                    :filters="grade_group"-->
<!--                                    :filter-method="filterHandler">-->
<!--                            </el-table-column>-->
                            <el-table-column
                                    prop="mobile"
                                    label="手机号">
                            </el-table-column>
<!--                            <el-table-column-->
<!--                                    prop="post"-->
<!--                                    label="职务">-->
<!--                            </el-table-column>-->
                        </el-table>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="14" :offset="1">
                <div id="rule_box">
                    <el-card shadow="hover">
                        <div class="table-name">考评项目清单</div>
                        <div id="rule_content_box">
                            <div class="rule-item" v-for="(item, index) in rules" :key="index">
                                <el-row>
                                    <el-col :span="10">
                                        <div class="rule-item-left">
                                            {{ index + 1 + '、' + item.grade_item }}
                                        </div>
                                    </el-col>
                                    <el-col :span="14">
                                        <div class="rule-item-right" v-if="item.rule_type == 'input'">
                                          <el-row>
                                            <el-col :span="14">
                                              <el-slider v-model="item.value" :min="0" :max="item.soe[0].score / 10" :format-tooltip="formatTooltip"></el-slider>
                                            </el-col>
                                            <el-col :span="8" :offset="2">
                                              <div class="rule-item-right-input-res">
                                                <span>得分：</span><span class="rule-item-right-input-res-score">{{ item.value / 10}}</span><span>&nbsp;分</span>
                                              </div>
                                            </el-col>
                                          </el-row>
                                        </div>
                                        <div class="rule-item-right" v-else>
                                            <el-radio-group v-model="item.check_option_id" size="small">
                                                <div v-for="(item2, index2) in item.soe" :key="index2">
                                                    <el-radio :label="item2.option_id" border>{{ item2.option_name + '（' + item2.opt_flg + item2.score/100 + '分）' }}</el-radio>
                                                    <br />
                                                </div>
                                            </el-radio-group>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-drawer
                title="考评操作记录"
                :visible.sync="drawer"
                :show-close="false"
                direction="rtl">
          <div id="score_box">
              <div class="score_box" v-for="(score_item, index) in score_record" :key="score_item.id">
                  <el-divider></el-divider>
                  {{ index+1 }}、{{ score_item.realName }}
                  <el-divider direction="vertical"></el-divider>
                  <span class="score_item">考评内容：</span>{{ score_item.grade_item }}
                  <el-divider direction="vertical"></el-divider>
                  <span class="score_item">结果：</span>{{ score_item.option_name  + score_item.opt_flg + score_item.score/100}}分
                  <el-divider direction="vertical"></el-divider>
                  <span class="score_item">考评时间：</span>：{{ score_item.effect_time }}
              </div>
              <div class="more_box">
                  <el-divider><el-button type="text" size="mini" @click="turnTo">查看更多</el-button></el-divider>
              </div>
          </div>
        </el-drawer>
    </div>
</template>
<script>
    import {getTeacherList, getRules, putGradeList, getPart, searchOneOperaterScoreRecord} from '@/api/deductPoints'
    export default {
        data() {
            return {
                chose_date: '',
                clientHeight: 500,
                multipleSelection: [],
                tableData: [],
                value: [1],
                rules: [],
                grade_group: [],
                date_options: [],
                date_value: '',
                drawer: false,
                loading: false,
                score_record: [],
                teacher_data: [],
                search_params: {
                    partID: '',
                    mobile: ''
                },
            };
        },
        methods: {
            //教师表-多选切换选项
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //教师表-年级下拉框中清除过滤器
            resetGradeFilter() {
                this.$refs.filterTable.clearFilter('grade');
            },
            //教师表-表格上方清除过滤器按钮
            clearFilter() {
                this.$refs.filterTable.clearFilter();
            },
            //教师表-年级过滤器
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            //考评表-得分滑块变为小数
            formatTooltip(val) {
                return val / 10;
            },
            //重置全部选项
            reset_page(){
                this.$refs.filterTable.clearSelection();
                for(var i = 0; i<this.rules.length; i++){
                    if(this.rules[i].rule_type == 'input'){
                        this.rules[i].value = 0;
                    }else{
                        this.rules[i].check_option_id = '';
                    }
                }
            },
            change_grade(){
                this.getTeacherList();
            },
            change_teacher(){
                this.getTeacherList();
            },
            //提交
            push(){
                if(this.multipleSelection.length == 0 || this.chose_date == ''){
                    if(this.multipleSelection.length == 0){
                        this.$message({
                            message: '请在左侧表格选择被考评的教师',
                            type: 'warning'
                        });
                    }else{
                        this.$message({
                            message: '请选择考评日期',
                            type: 'warning'
                        });
                    }
                }else{
                    this.$confirm('确定无误，确认提交?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.loading = true;
                        let arr = [];
                        for(var i=0;i<this.multipleSelection.length;i++){
                            for(var j=0;j<this.rules.length;j++){
                                if(this.rules[j].value != 0 || this.rules[j].check_option_id != ''){
                                    if(this.rules[j].rule_type == 'input'){
                                        this.rules[j].score = this.rules[j].value * 10;
                                        this.rules[j].opt_flg = this.rules[j].soe[0].opt_flg;
                                        this.rules[j].option_id = this.rules[j].soe[0].option_id;
                                        this.rules[j].option_name = this.rules[j].soe[0].option_name;
                                        this.rules[j].cycle = this.rules[j].soe[0].cycle;
                                    }else{
                                        for(var n=0;n<this.rules[j].soe.length;n++){
                                            if(this.rules[j].soe[n].option_id == this.rules[j].check_option_id){
                                                this.rules[j].score = this.rules[j].soe[n].score;
                                                this.rules[j].opt_flg = this.rules[j].soe[n].opt_flg;
                                                this.rules[j].option_id = this.rules[j].soe[n].option_id;
                                                this.rules[j].option_name = this.rules[j].soe[n].option_name;
                                                this.rules[j].cycle = this.rules[j].soe[n].cycle;
                                            }
                                        }
                                    }
                                    this.rules[j].grade_obj_id = this.multipleSelection[i].mobile;
                                    this.rules[j].time = this.chose_date;
                                    arr.push(JSON.parse(JSON.stringify(this.rules[j])));
                                }
                            }
                        }
                        putGradeList(arr).then((res) => {
                            if (res.code != "200") {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'warning'
                                });
                                this.loading = false;
                            }else{
                                this.$message({
                                    type: 'success',
                                    message: '提交成功!'
                                });
                                this.searchOneOperaterScoreRecord();
                                this.reset_page();
                                this.loading = false;
                            }
                        }).catch(() => {
                            this.loading = false;
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消提交'
                        });
                    });
                }
            },
            getTeacherList(){
                getTeacherList(this.search_params).then((res) => {
                    if (res.code != "200") {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }else{
                        this.tableData = res.data;
                    }
                }).catch(() => {

                })
            },
            getRules(){
                getRules({pid: this.pid}).then((res) => {
                    if (res.code != "200") {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }else{
                        for(var i=0; i<res.data.length; i++){
                            res.data[i].catalog_flg = 'Y';
                            res.data[i].check_option_id = '';
                            res.data[i].value = 0;
                        }
                        this.rules = res.data;
                    }
                }).catch(() => {

                })
            },
            getPart(){
                getPart().then((res) => {
                    if (res.code != "200") {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }else{
                        this.grade_group = res.data;
                    }
                }).catch(() => {

                })
            },
            searchOneOperaterScoreRecord() {
                let params = {
                    pageNum: 1,
                    pageCount: 100,
                    pageSize: 20,
                    start_time: '',
                    end_time: '',
                    grade_obj_id: ''
                }
                searchOneOperaterScoreRecord(params).then((res) => {
                    if (res.code != "200") {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }else{
                        this.score_record = res.data.object;
                    }
                }).catch(() => {

                })
            },
            turnTo(){
                this.$router.replace('/deduct_points/deduction_record');
            },
            getTeacherOption() {
                getTeacherList({}).then((res) => {
                    if (res.code != "200") {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }else{
                        this.teacher_data = res.data;
                    }
                }).catch(() => {

                })
            },
        },
        created(){
            this.clientHeight = document.body.clientHeight;
            this.getTeacherList();
            this.getRules();
            this.getPart();
            this.searchOneOperaterScoreRecord();
            this.getTeacherOption();
        },
        mounted() {
            document.getElementById("rule_content_box").style.height = document.body.clientHeight -280 + 'px';
        },
        props: {
            pid: String
        }
    }
</script>
<style lang="scss">
    #deductPoints {
        #top_btn_box {
            padding: 10px;
        }
        #teacher_box {
            padding: 0 0 0 10px;
        }
        #rule_box {
            padding: 0 10px 0 0;
            #rule_content_box {
                overflow: auto;
            }
            .el-radio{
                margin: 10px 0 10px 0;
            }
            .rule-item {
                border: 2px solid #E4E7ED;
                border-radius: 14px;
                margin-bottom: 10px;
            }
            .rule-item-right {
                padding: 20px;
                border-left: 1px solid #E4E7ED;
            }
            .rule-item-left {
                padding: 10% 20px 20px 20px ;
                font-size: 14px;
                color: #606266;
            }
            .rule-item-right-input-res {
                color: #606266;
                font-size: 14px;
                padding-top: 7px;
            }
            .rule-item-right-input-res-score{
                color: #409EFF;
                font-size: 16px;
            }
        }
        .transfer-footer {
            margin-left: 20px;
            padding: 6px 5px;
        }
        .el-transfer-panel {
            width: 50%;
        }
        .el-transfer__buttons {
            display: none;
        }
        .el-transfer-panel {
            margin: 50px;
        }
        .table-name {
            text-align: center;
            font-size: 18px;
            color: #606266;
            padding: 10px;
        }
        .el-icon-arrow-down {
            color: #409EFF;
            font-size: 16px;
            font-weight: 800;
            margin-left: 4px;
        }
        .title_span {
          font-size: 14px;
          color: #606266;
        }
        .score_box {
            margin: 0 10px;
            color: #606266;
            font-size: 14px;
            .el-divider--horizontal {
              margin: 8px 0;
            }
            .el-divider--vertical {
                margin: 0 6px;
            }
            .score_item {
                color: #909399;
            }
        }
        .more_box {
            margin: 0 10px;
            color: #606266;
            font-size: 14px;
          .el-divider--horizontal {
            margin: 30px 0;
          }
        }
        .el-drawer__header {
            margin-bottom: 10px;
        }
        #score_box {
            max-height: calc(94vh);
            overflow: auto;
        }
    }
</style>
